<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="a">{{ aaa }}<span>{{ vvvv }}</span></div>
        <div class="b" v-on:click="clickEvent">clickEvent点击我{{ bbbb }}</div>
        <div class="o" @click="clickEvent2">clickEvent2{{ eeee.e }}----{{ oooo }}</div>
        <input type="text" v-model="model.m" />
        <div v-html="dddd"></div>
        <div v-text="text_direct" ></div>
        <div v-text="person.name"></div>
        <div v-text="person.age"></div>
        <img :src="imgUrl" alt="">
    </div>
    <script src="./Observer.js"></script>
    <script src="index.js"></script>
    <script>
        var vm = new MyVue({
            el: '#app',
            data: {
                aaa: '我是aaa',
                vvvv: '我是vvvv',
                bbbb: 'bbbbb',
                eeee: {
                    e: '我是eeee'
                },
                model: {
                    m: '我是model'
                },
                dddd: '我是HTML',
                text_direct: '我是text指令',
                oooo: '我是O',
                person: {
                    name: '我是年龄',
                    age: '12'
                },
                imgUrl: 'https://fanyiapp.cdn.bcebos.com/cms/image/5464a363589faed0a9d288b13cf34470.PNG'
            },
            methods: {
                clickEvent () {
                    console.log('111111');
                    this.bbbb = '变化之后的bbbb';
                },
                clickEvent2 () {
                    console.log('2222222');
                    this.eeee.e = '我是新的eeee'

                }
            }
        });
    </script>
</body>
</html>